
<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/admin.css" />
    <style>
        .hd-form-upload {
            width: 80px;
            height: 80px;
            display: inline-block;
            cursor: pointer;
        }

        .hd-form-upload input {
            display: none;
        }

        .hd-form-upload span {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            float: left;
            overflow: hidden;
            background-color: #ddd;
        }

        .hd-form-upload span img {
            width: 100%;
            display: inline;
            vertical-align: middle;
        }

        .hd-form-upload span i {
            width: 80px;
            height: 80px;
            float: left;
            position: relative;
        }

        .hd-form-upload  span i:before {
            content: "";
            border-top: 2px solid #bbb;
            position: absolute;
            top: 39px;
            left: 20px;
            right: 20px;
        }

        .hd-form-upload  span i:after {
            content: "";
            border-right: 2px solid #bbb;
            position: absolute;
            top: 20px;
            left: 39px;
            bottom: 20px;
        }
    </style>
</head>
<body class="pear-container">
<script src="/static/common/jquery-3.6.0.min.js"></script>
<script src="/static/pear/component/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<script>
    function up(key) {
        layui.use(['upload'], function() {
            var upload = layui.upload;
            upload.render({
                elem: '#up'+key
                ,url: "{:url('Pub/blob')}"
                ,accept:'images'
                ,acceptMime: 'image/*'
                ,exts:'jpeg|jpg|png'
                ,done: function(res){
                    if(res.code == 200){
                        $("#t"+key).html(
                            '                                <div style="display: flex">\n' +
                            '                                <label  class="hd-form-upload">\n' +
                            '                                    <span>\n' +
                            '                                        <img src="'+ res.data + '" />\n' +
                            '                                    </span>\n' +
                            '                                </label>\n' +
                            '                                <input type="hidden" name="images" value="'+ res.data + '"/>\n' +
                            '                            <p style="margin-left:130px;">建议图片大小为570*300px,否则可能导致图片变形\n' +
                            '                            </p>\n'+
                            '                                <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" onclick="del_img(this)">删除</button>\n' +
                            '                                </div>'

                        );
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        });
    }

    function uploads(key1, key) {
        layui.use(['upload'], function() {
            var upload = layui.upload;
            upload.render({
                elem: '#'+key1+'upload'+key
                ,url: "{:url('Pub/blob')}"
                ,accept:'images'
                ,acceptMime: 'image/*'
                ,exts:'jpeg|jpg|png'
                ,done: function(res){
                    if(res.code == 200){

                        $('#'+key1+'tt'+key).html(
                            '                                <div style="display: flex">\n' +
                            '                                <label  class="hd-form-upload">\n' +
                            '                                    <span>\n' +
                            '                                        <img src="'+ res.data + '" />\n' +
                            '                                    </span>\n' +
                            '                                </label>\n' +
                            '                                <input type="hidden" name="option_images" value="'+ res.data + '"/>\n' +
                            '                                <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" onclick="del_images(this)">删除</button>\n' +
                            '                                </div>'

                        );
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        });

    }
</script>
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <fieldset class="layui-elem-field layui-form" lay-filter="add">
                    <legend>基本信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题(CN)</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" value="{$survey['title']}"  autocomplete="off" placeholder="请输入调研标题(CN), 最多200个字符" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">标题(EN)</label>
                            <div class="layui-input-block">
                                <input type="text" name="e_title" value="{$survey['e_title']}" autocomplete="off" placeholder="请输入调研标题(EN), 最多200个字符" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">调研封面</label>
                            <div class="layui-input-block">
                                <label  class="hd-form-upload" id="image">
                                    <span id="thumb-banner-thumb">
                                        {empty name="survey.images"}
                                            <i></i>
                                        {else /}
                                            <img src="{$survey.images}" />
                                        {/empty}
                                    </span>
                                </label>
                                <input type="hidden" id="banner_thumb" name="images" value="{$survey.images}"/>
                            </div>
                            <p style="margin-left:130px;">
                                封面图尺寸为16:9
                            </p>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">课件分类</label>
                            <div class="layui-input-block" style="width: 50%">
                                <select name="cate_id" lay-verify="required">
                                    <option value="">请选择课件分类</option>
                                    {volist name="cate" id="vo"}
                                    <option value="{$vo.id}" {eq name="courseware.cate_id" value="$vo.id"}selected{/eq}>{$vo.title}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">课件标签</label>
                            <div class="layui-input-block" style="width: 50%">
                                <select name="label_id" xm-select="select4" xm-select-skin="default" lay-verify="required">
                                    {volist name="label1" id="v"}
                                    <option value="{$v.id}" selected>{$v.title}</option>
                                    {/volist}
                                    {volist name="label" id="vo"}
                                    <option value="{$vo.id}">{$vo.title}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">是否公开</label>
                            <div class="layui-input-block">
                                <input type="radio" name="open" value="1" title="公开" {eq name="courseware['open']" value="1"}checked{/eq}>
                                <input type="radio" name="open" value="2" title="非公开" {eq name="courseware['open']" value="2"}checked{/eq}>
                            </div>
                            <div class="layui-form-mid layui-word-aux">Tips：公开课件可供所有有资源库权限的用户复制和引用。</div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">调研说明</label>
                            <div class="layui-input-block">
                                <textarea name="description" id="description" style="height: 200px;">{$survey.description}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">调研结果</label>
                            <div class="layui-input-block">
                                <input type="radio" name="survey_result" value="1" title="展示" {eq name="survey['survey_result']" value="1"}checked{/eq}>
                                <input type="radio" name="survey_result" value="2" title="不展示" {eq name="survey['survey_result']" value="2"}checked{/eq}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">截止时间</label>
                            <div class="layui-input-block" style="width: 30%;">
                                <input type="text" name="end_time" value="{$survey.end_time}" id="date" autocomplete="off" placeholder="请选择截止日期" class="layui-input">
                            </div>
                            <p style="margin-left:130px;">
                                调研截止时间不设置，默认关联课程完成情况
                            </p>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">关联课程完成情况</label>
                            <div class="layui-input-block">
                                <input type="radio" class="ra" name="relation" value="1" title="关联" {eq name="survey['relation']" value="1"}checked{/eq}>
                                <input type="radio" class="ra1" name="relation" value="2" title="不关联" {eq name="survey['relation']" value="2"}checked{/eq}>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="courseware_id" value="{$courseware_id}">
                    <input type="hidden" name="id" value="{$survey.id}">
                </fieldset>

                <fieldset class="layui-elem-field">
                    <legend>调研问题</legend>
                    <div class="layui-field-box">
                        <div class="subject">
                            {volist name="survey.subject" id="vo" key="keys"}
                            <fieldset class="layui-elem-field layui-form k{$keys}" lay-filter="k{$keys}">
                                <legend>
                                    <span id="sn">问题【{$keys}】</span>
                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="del_subject('{$keys}')">删除此题</button>
                                </legend>
                                <div class="layui-field-box">
                                    <div class="layui-row">
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="display: flex">
                                                <textarea name="subject" placeholder="请输入题目" lay-verify="required" class="layui-textarea" style="width: 780px">{$vo.subject}</textarea>
                                                <div>
                                                    <button type="button" id="up{$keys}" class="layui-btn">上传图片</button>
                                                    <script>
                                                        up('{$keys}');
                                                    </script>
                                                </div>
                                            </div>
                                            <div class="layui-input-block" id="t{$keys}">
                                                {notempty name="$vo.images"}
                                                <div style="display: flex">
                                                    <label class="hd-form-upload">
                                                        <span>
                                                            <img src="{$vo.images}" />
                                                        </span>
                                                    </label>
                                                    <input type="hidden" name="images" value="{$vo.images}"/>
                                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" onclick="del_img(this)">删除</button>
                                                </div>
                                                {/notempty}
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">选项类型</label>
                                            <div class="layui-input-block" style="display: flex">
                                                <button type="button" {if condition="$vo.subject_type eq 1"}class="layui-btn layui-btn-sm"{else/}class="layui-btn layui-btn-sm layui-btn-primary layui-border-green"{/if} id="{$keys}" onclick="types(this,1)">单选</button>
                                                <button type="button" {if condition="$vo.subject_type eq 2"}class="layui-btn layui-btn-sm"{else/}class="layui-btn layui-btn-sm layui-btn-primary layui-border-green"{/if} id="{$keys}" onclick="types(this,2)">多选</button>
                                                <button type="button" {if condition="$vo.subject_type eq 3"}class="layui-btn layui-btn-sm"{else/}class="layui-btn layui-btn-sm layui-btn-primary layui-border-green"{/if} id="{$keys}" onclick="types(this,3)">开放式</button>
                                                <button type="button" {if condition="$vo.subject_type eq 4"}class="layui-btn layui-btn-sm "{else/}class="layui-btn layui-btn-sm layui-btn-primary layui-border-green"{/if} id="{$keys}" onclick="types(this,4)">打分项</button>
                                            </div>
                                            <span>Tip: 评分项类型的题目，有NA-10 共11个选项，选择NA 不计分，选择计分时，1~10分别代表1~10分。</span>
                                        </div>
                                        {if ($vo.subject_type < 3)}
                                            <div class="option{$keys}">
                                                {if ($vo.subject_type < 3)}
                                                    {volist name="vo.options" id="v" key="k"}
                                                        <div class="layui-form-item layui-form" lay-filter="{$keys}kk{$k}" id="{$keys}">
                                                            <label class="layui-form-label"><span>选项[{$k}]</span></label>
                                                            <div class="layui-input-block" style="display: flex">
                                                                <input type="text" name="option" value="{$v.title}" autocomplete="off" placeholder="请输入选项内容" class="layui-input" style="width: 80%">
                                                                <div>
                                                                    <button type="button" id="{$keys}upload{$k}" class="layui-btn">上传图片</button>
                                                                    <script>
                                                                        uploads('{$keys}', '{$k}');
                                                                    </script>
                                                                </div>
                                                                {if condition="$k neq 1"}
                                                                <button type="button" class="layui-btn layui-btn-danger" onclick="del_option(this)">删除选项</button>
                                                                {/if}
                                                            </div>
                                                            <div class="layui-input-block" id="{$keys}tt{$k}">
                                                                {notempty name="$v.option_images"}
                                                                <div style="display: flex">
                                                                    <label  class="hd-form-upload">
                                                                       <span>
                                                                           <img src="{$v.option_images}" />
                                                                       </span>
                                                                    </label>
                                                                    <input type="hidden" name="option_images" value="{$v.option_images}"/>
                                                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" onclick="del_images(this)">删除</button>
                                                                </div>
                                                                {/notempty}
                                                            </div>
                                                            <input type="hidden" name="id" value="{$v.id}">
                                                        </div>
                                                    {/volist}
                                                {/if}
                                            </div>
                                        {else/}
                                            <div class="option{$keys}" style="display: none;">
                                                <div class="layui-form-item layui-form" lay-filter="{$keys}kk1" id="{$keys}">
                                                    <label class="layui-form-label"><span>选项[1]</span></label>
                                                    <div class="layui-input-block" style="display: flex">
                                                        <input type="text" name="option" value="" autocomplete="off" placeholder="请输入选项内容" class="layui-input" style="width: 80%">
                                                        <div>
                                                            <button type="button" id="{$key}upload1" class="layui-btn">上传图片</button>
                                                            <script>
                                                                uploads('{$keys}', 1);
                                                            </script>
                                                        </div>
                                                    </div>
                                                    <div class="layui-input-block" id="{$keys}tt1">
                                                    </div>
                                                    <input type="hidden" name="id" value="0">
                                                </div>
                                            </div>
                                        {/if}
                                        <div class="layui-form-item">
                                            <div class="layui-input-block xx{$keys}" id="{$vo.options_count}" {if ($vo.subject_type > 2)}style="display: none;"{/if}>
                                            {if ($vo.subject_type > 2)}
                                                <button type="button" class="layui-btn" onclick="add_option('0','{$keys}')">添加选项</button>
                                            {else/}
                                                <button type="button" class="layui-btn" onclick="add_option('{$k}','{$keys}')">添加选项</button>
                                            {/if}
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn q{$keys}" id="{$keys}" onclick="qt(this)" {if ($vo.subject_type > 2)}style="display: none;"{/if}>添加"其他"选项</button>
                                        </div>
                                    </div>
                                    <div class="qt{$keys}">
                                        {if ($vo.subject_type < 3)}
                                            {if condition="$vo.other neq ''"}
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">选项名称</label>
                                                    <div class="layui-input-block" style="display: flex">
                                                        <input type="text" name="other" value="{$vo.other}" lay-verify="required" autocomplete="off" value="其他" class="layui-input" style="width: 80%">
                                                        <button type="button" class="layui-btn layui-btn-danger" onclick="del_qt(this)">删除</button>
                                                    </div>
                                                </div>
                                            {/if}
                                        {/if}
                                    </div>
                                    <div class="dx{$keys}">
                                        {if condition="$vo.subject_type eq 2"}
                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label">答题选择数量</label>
                                                    <div class="layui-input-inline">
                                                        <input type="number" min="1" name="min" placeholder="至少选择数量" value="{$vo.min}" autocomplete="off" class="layui-input">
                                                    </div>
                                                    <div class="layui-form-mid">-</div>
                                                    <div class="layui-input-inline">
                                                        <input type="number" min="1" name="max" placeholder="至多选择数量" value="{$vo.max}" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                            </div>
                                        {elseif condition="$vo.subject_type eq 3"}
                                            <div class="layui-form-item" style="display: flex">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label">答题字数范围</label>
                                                    <div class="layui-input-inline" style="width: 100px;">
                                                        <input type="number" min="1" name="character_min" value="{$vo.character_min}" placeholder="最小字数" value="0" autocomplete="off" class="layui-input">
                                                    </div>
                                                    <div class="layui-form-mid">-</div>
                                                    <div class="layui-input-inline" style="width: 100px;">
                                                        <input type="number" min="1" name="character_max" value="{$vo.character_max}" placeholder="最大字数" value="0" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <span>如果不填写，默认无字数限制</span>
                                            </div>
                                            <div class="layui-form-item"  style="display: flex">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label">答题框大小</label>
                                                    <div class="layui-input-inline">
                                                        <select name="height">
                                                            <option value="">设置高度</option>
                                                            <option value="1" {eq name="vo['height']" value="1"}selected="selected"{/eq}>高度1行</option>
                                                            <option value="2" {eq name="vo['height']" value="2"}selected="selected"{/eq}>高度2行</option>
                                                            <option value="3" {eq name="vo['height']" value="3"}selected="selected"{/eq}>高度3行</option>
                                                            <option value="4" {eq name="vo['height']" value="4"}selected="selected"{/eq}>高度4行</option>
                                                            <option value="5" {eq name="vo['height']" value="5"}selected="selected"{/eq}>高度5行</option>
                                                            <option value="6" {eq name="vo['height']" value="6"}selected="selected"{/eq}>高度6行</option>
                                                            <option value="7" {eq name="vo['height']" value="7"}selected="selected"{/eq}>高度7行</option>
                                                            <option value="8" {eq name="vo['height']" value="8"}selected="selected"{/eq}>高度8行</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <span>不设置高度，默认高3行</span>
                                            </div>
                                        {elseif condition="$vo.subject_type eq 4"}
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">1分描述*</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="one_intro" value="{$vo.one_intro}" placeholder="请填写1分描述" max="10" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">10分描述*</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="ten_intro" value="{$vo.ten_intro}" placeholder="请填写10描述" max="10" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        {/if}
                                    </div>
                                </div>
                                <input type="hidden" name="id" value="{$vo.id}">
                            </fieldset>
                            {/volist}
                        </div>
                        <div class="an">
                            <button type="button" class="layui-btn" onclick="add_subject('{$survey.subject_count}')">添加题目</button>
                        </div>
                    </div>
                </fieldset>
                <div class="layui-form-item layui-layout-admin" style="text-align: center">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;z-index: 1000 !important;">
                            <button class="layui-btn" lay-submit lay-filter="user-save">保存</button>
                        </div>

                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

    <script>
        layui.use(['jquery', 'form', 'laydate','croppers', 'tinymce', 'select'], function(){
            var $ = layui.$
                ,croppers = layui.croppers
                ,laydate = layui.laydate
                ,form = layui.form;

            let tinymce = layui.tinymce;
            let select = layui.select;

            select.render({
                placeholder: '请选择课件标签'
            });

            var description = tinymce.render({
                elem: "#description",
                height: 400,
                images_upload_url: "{:url('Pub/blob')}",
                form: {name:'file'}
            });

            laydate.render({
                elem: '#date'
                ,trigger: 'click'
                ,type: 'datetime'
                ,done: function(value, date, endDate){
                    if (value != '') {
                        $('.ra1').prop('checked', true);
                    } else {
                        $('.ra').prop('checked', true);
                    }
                    form.render();
                }
            });
            //创建一个Banner上传组件
            croppers.render({
                elem: '#image'
                //,saveW:750     //保存宽度
                //,saveH:768
                ,mark:16/9    //选取比例
                ,area:'850px'  //弹窗宽度
                ,url: "{:url('Pub/blob')}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                ,done: function(url){ //上传完毕回调
                    $("#thumb-banner-thumb").html('<img src="'+ url + '" />');
                    $("#banner_thumb").val(url);
                }
            });

            form.on('submit(user-save)', function(data) {
                var form = layui.form;
                var data = form.val('add');

                var content = description.getContent();
                data.description = '';
                data.description += content;

                var num = $(".subject > fieldset").length;
                var subject = [];
                for (var i = 0; i < num; i++) {
                    var newA = i + 1;

                    var rows = form.val('k'+newA);

                    clas = ".option"+newA+" > div";
                    var option_num = $(clas).length;
                    var option = [];
                    for (var ii = 0; ii < option_num; ii++) {

                        var nA = ii + 1;
                        var res = form.val(newA+'kk'+nA);
                        option.push(res);

                    }
                    rows['options']  = option;
                    subject.push(rows);
                }
                let loading = layer.load();
                $.ajax({
                    url: '/Courseware/modifySurvey',
                    data: JSON.stringify({data:data, subject:subject}),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function(result) {
                        layer.close(loading);
                        if (result.status == 0) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
                return false;
            });
        });
    </script>

    <script>
        var arr = ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20',
            '21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40',
            '41','42','43','44','45','46','47','48','49','50'];
        function Vf(arr,item){
            for(var i=0;i<arr.length;i++){
                if(arr[i] == item){
                    return i;
                }
            }
        }
        function add_subject(key) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;

        }



        function del_subject(key) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }


        function del_img(i) {
            i.parentNode.remove();
        }

        function add_option(key, key1) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }


        function del_images(i) {
            i.parentNode.remove();
        }
        function del_option(i) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }
        function types(i,key) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }

        function qt(i) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }

        function del_qt(i) {
            layer.msg('该调研已有提交记录, 不可进行该操作', {icon: 1});return false;
        }
    </script>
</body>
</html>

